<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        什么是插值表达式
        又称为Mustache,俗称胡子语法（为了区别React，俗称小胡子）,使用{{}},
        插值表达式的内容
        1）变量 2）常量 3）表达式 4）调用方法

        methods:可以定义自定义函数，也可以定义事件处理函数
     -->
     <div id="root">
        <h1>{{"自我介绍"}}</h1>
        <div>
            姓名:{{name}}
        </div>
        <div>
            虚岁:{{age+1}}
        </div>
        <div>
            是否成年:{{age>=18?"成年":"未成年"}}
        </div>
        <div>
            生日:{{idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.substring(12,14)}}
        </div>
        <div>
            生日2:{{getBirthday(idcard)}}
        </div>
        <div>
            {{msg.split("").reverse().join("")}}
        </div>
     </div>
     <script>
        new Vue({
            el:'#root',
            data(){
                return{
                    idcard:'610122198709094030',
                    name:'Giles',
                    age:39,
                    msg:'HelloWorld'
                }
            },
            methods:{
                getBirthday(idcard){
                    return idcard.slice(6,10)+"-"+idcard.slice(10,12)+"-"+idcard.substring(12,14)
                }
            }
        })
     </script>
</body>
</html>

<!-- 
    定义一个data数据，HelloWorld
    使用插值表达式输出 dlroWolleH

 -->